<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/iconfonts/iconfont.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<title>头部</title>
</head>
<style>
*{
margin:0;
padding:0;
text-decoration:none;
border:0;
}
 .logo{
float:left;
 letter-spacing:4px;
width:200px;
height:50px;
margin-top:30px;
margin-left:200px;
 font-size:30px;
 font-family:微软雅黑;
 color:#000;
 }
 .logo span{
 padding-left:30px;
 padding-top:100px;
  font-size:20px;
  color:#4a4a4a;
 }
 
 .shell {
           float:left;
           margin:30px 0px 0px 400px;
            position: relative;
            width: 350px;
            padding: 15px;
            background-color: #fff;
            height:20px;
            border-radius: 20px;
            box-shadow: 0 5px 10px #8d8d8d, 0 0 0 10px #fff;
  }

        .shell form input[type="text"] {
            outline:none;
            width: 80%;
            height:25px;
            color: #000;
            border-radius:20px;
            font-size:15px;
            background-color:rgba(0,0,0,0);
             
        }
          .shell form input[type="submit"]{
            color: #fff;
            border-radius:20px;
            font-family:'优设标题黑';
            font-size:15px;
             height:53px;
             width:60px;
            border:0;
            padding:5px;
            background-color: #900000;
            transition: .3s;
             position: absolute;
             top:2px;
             right:20px;
           
          }
        
        .shell input::placeholder {
            color: #8f36367e;
             font-size:15px;
        }

        .shell a {
            font-size: 25px;
            position: absolute;
            right: 10px;
            top: -5px;
            color:#900000;
            width: 140px;
            height: 50px;
        }

        .shell a .fa {
            margin: 15px 10px;
            transition: .3s;
        }

         .shell form input[type="submit"]{
            transform: translateX(30px);
            opacity: 1;
        }

        .shell a .fa-hand-o-right {
            transform: translateX(-10px);
            opacity: 0;
        }

          .shell form a:hover input[type="submit"]{
            transform: translateX(0);
            opacity: 0;
        }

        .shell a:hover .fa-hand-o-right {
            transform: translateX(80px);
            opacity: 1;
        }

        .shell a::before {
            content: 'GO!';
            position: absolute;
            display: block;
            font-size: 15px;
            background-color: #900000;
            padding: 0px 10px;
            top: 10px;
            right: 10px;
            border-radius: 10px;
            transition: .3s;
            opacity: 0;
            animation: box 1s infinite ease;
            color:#fff;
        }

        .shell a:hover::before{
            top: -20px;
            opacity: 1;
        }

        @keyframes box {
            0%{
                transform: rotate(0deg);
            }
            33%{
                transform: rotate(8deg);
            }
            66%{
                transform: rotate(-8deg);
            }
            100%{
                transform: rotate(0deg);
            }
        }
        
        
.out{
float:left;
font-size:15px;
background-color: #900000;
padding:5px;
margin-top:15px;
margin-left:30px;
}
.out a{
color:#fff;
}
.tx{
float:left;
width:80px;
height:100px;
position:relative;
margin-left:280px;
margin-top:10px;
}
.tx .yhm{
position:absolute;
top:0px;
float:left;
width:60px;
height:60px;
border-radius:50%;
font-size:18px;
text-align:center;
background:#900000;
overflow:hidden;
}
.tx p{
position:absolute;
top:60px;
left:5px;
text-align:center;
color:#000;
}
.tx .yhm img{
width:100%;
height:100%;
object-fit: cover;
}
</style>
<body>
<div class="logo">
零度科技<br><span>股份有限公司</span>
</div>
 <div class="shell">
  <form action="search.jsp"  method="post" target="main">
        <input type="text" placeholder="请输入详细地址关键字进行搜索" name="dz"  value="">
        <a  href="#" >
            <i class="fa fa-hand-o-right"></i>
            <input type="submit"  value="搜索" />
        </a>
          </form>
    </div>
<%
String strYhm=(String)session.getAttribute("username");
%>
<div class="tx">
<div class="yhm">
<img src="images/tx.jpg">
</div>
<p><%=strYhm %></p>
</div>
<div class="out">
<a href="logout.jsp" target="_top" >退出</a>
</div>


</body>
</html>